<!DOCTYPE html>
<html>
<head>
    <title>第二章_函数与window对象</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/gitbook/style.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/gitbook/istyle.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>





<div data-basepath="/service/gitbook" class="book">
    <div class="book-summary">
        <ul class="summary">
            <li>
                <a href="./index.html">笔记</a>
            </li>
            <li class="divider"></li>
            
                
                
    
    <li data-level="1" class="chapter" data-path="01_JavaScript基本语法.html">
        
        
        <a href="./01_JavaScript基本语法.html" ><b>1</b> 第一章:JavaScript基本语法</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="2" class="chapter active" data-path="02_函数与window对象.html">
        
        
        <a href="./02_函数与window对象.html" ><b>2</b> 第二章_函数与window对象</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="3" class="chapter" data-path="03_DOM编程.html">
        
        
        <a href="./03_DOM编程.html" ><b>3</b> 03_DOM编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="4" class="chapter" data-path="04_DOM高级编程.html">
        
        
        <a href="./04_DOM高级编程.html" ><b>4</b> 04_DOM高级编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="5" class="chapter" data-path="05_控制CSS样式.html">
        
        
        <a href="./05_控制CSS样式.html" ><b>5</b> 05_控制CSS样式</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="6" class="chapter" data-path="06_表单验证及操作基础.html">
        
        
        <a href="./06_表单验证及操作基础.html" ><b>6</b> 06_表单验证及操作基础</a>
        
            
                    
                
        
    </li>

            
        </ul>

    </div>

    <div class="book-body">
        <div class="body-inner">

            <div class="book-header" role="navigation">
                <h1>
                    <a href="./index.html" > 笔记</a>
                </h1>
            </div>

            <div tabindex="-1" class="page-wrapper">
                <div class="page-inner">
                    <h2 class="post_title"> 第二章_函数与window对象 </h2>
                    <div class="post_body"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">第二章_函数与window对象</a>
<ul>
<li>
<a href="#toc_1">练习:用函数控制次数弹出helloworld的次数</a>
</li>
<li>
<a href="#toc_2">练习:编写一个四则运算函数</a>
</li>
<li>
<a href="#toc_3">变量作用域</a>
</li>
<li>
<a href="#toc_4">window对象</a>
<ul>
<li>
<a href="#toc_5">常用属性</a>
</li>
<li>
<a href="#toc_6">常用方法</a>
<ul>
<li>
<a href="#toc_7">alert()方法</a>
</li>
<li>
<a href="#toc_8">prompt()方法</a>
</li>
<li>
<a href="#toc_9">confirm()方法</a>
</li>
<li>
<a href="#toc_10">confirm 与 alert 与 prompt的区别</a>
</li>
<li>
<a href="#toc_11">close()方法</a>
</li>
<li>
<a href="#toc_12">open()方法</a>
</li>
<li>
<a href="#toc_13">setTimeout()方法</a>
</li>
<li>
<a href="#toc_14">作业:</a>
</li>
<li>
<a href="#toc_15">setInterval()方法</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#toc_16">事件</a>
<ul>
<li>
<a href="#toc_17">onload事件:</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">练习:用函数控制次数弹出helloworld的次数</h2>
<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>用函数输入Hello world<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
        <span class="c1">//写一个hello函数</span>
            <span class="kd">function</span> <span class="nx">hello</span><span class="p">(){</span>
                <span class="c1">//获取ID为num的元素的值.</span>
                <span class="kd">var</span> <span class="nx">num</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;num&#39;</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
                <span class="c1">//循环次数弹窗</span>
                <span class="k">for</span><span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span> <span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">num</span> <span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
                    <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;Hello World!&#39;</span><span class="p">);</span>  
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        次数:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;num&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;hello()&quot;</span><span class="p">&gt;</span>按扭<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_2">练习:编写一个四则运算函数</h2>

<p class="md_block">
    <span class="md_line">需求说明<br /></span>
    <span class="md_line">使用prompt输入两个数和运算符号，然后计算两个数的操作结果<br /></span>
    <span class="md_line">使用switch判断运算符号<br /></span>
    <span class="md_line">调用函数计算两数的结果</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>简单计算器<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">var</span> <span class="nx">a</span><span class="p">,</span><span class="nx">b</span><span class="p">,</span><span class="nx">c</span><span class="p">,</span><span class="nx">over</span><span class="p">;</span>
            <span class="nx">a</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;请输入第一个数:&quot;</span><span class="p">);</span>
            <span class="nx">b</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;请输入运算符(+-*/):&quot;</span><span class="p">);</span>
            <span class="nx">c</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;请输入第二个数:&quot;</span><span class="p">);</span>
            <span class="c1">//数据类型转换</span>
            <span class="nx">a</span> <span class="o">=</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
            <span class="nx">c</span> <span class="o">=</span> <span class="nb">Number</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
            
            <span class="c1">//通过b的值判断是+-*/哪个运算.</span>
            <span class="k">switch</span><span class="p">(</span><span class="nx">b</span><span class="p">){</span>
                <span class="k">case</span> <span class="s1">&#39;+&#39;</span><span class="o">:</span>
                    <span class="nx">over</span> <span class="o">=</span> <span class="nx">a</span><span class="o">+</span><span class="nx">c</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s1">&#39;-&#39;</span><span class="o">:</span>
                    <span class="nx">over</span> <span class="o">=</span> <span class="nx">a</span><span class="o">-</span><span class="nx">c</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s1">&#39;*&#39;</span><span class="o">:</span>
                    <span class="nx">over</span> <span class="o">=</span> <span class="nx">a</span><span class="o">*</span><span class="nx">c</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="s1">&#39;/&#39;</span><span class="o">:</span>
                    <span class="c1">//注意有点小BUG,除数不能为零</span>
                    <span class="nx">over</span> <span class="o">=</span> <span class="nx">a</span><span class="o">/</span><span class="nx">c</span><span class="p">;</span>
                <span class="k">break</span><span class="p">;</span>
                <span class="k">default</span><span class="o">:</span>
                    <span class="nx">over</span> <span class="o">=</span> <span class="s2">&quot;你输入的运算符号有误!&quot;</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span> <span class="o">+</span> <span class="nx">c</span> <span class="o">+</span><span class="s2">&quot;=&quot;</span> <span class="o">+</span> <span class="nx">over</span><span class="p">);</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_3">变量作用域</h2>

<p class="md_block">
    <span class="md_line">申明在函数以内的叫局部变量,申明在函数外的叫全局变量,<br /></span>
    <span class="md_line">注意:JS可以申明全局变量与局部变量同名,调用时就近原则.</span>
</p>

<div class="codehilite code_lang_javascript  highlight"><pre><span></span>            <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
            <span class="kd">function</span> <span class="nx">fun</span><span class="p">(){</span>
                <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">500</span><span class="p">;</span>
                <span class="nx">alert</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">a</span><span class="p">);</span><span class="c1">//就近原则.一旦申明的局部变量与全局变量同名,则先调用局部变量,如果想调用全局的,就用window.变量名...</span>
                <span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">fun</span><span class="p">();</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_4">window对象</h2>

<h3 id="toc_5">常用属性</h3>

<p class="md_block">
    <span class="md_line">screen属性:获取显示器相关的信息.<br /></span>
    <span class="md_line">参见手册:javascript --&gt;右边的参考手册--&gt;window对象<br /></span>
    <span class="md_line">location属性:获取或设置地址栏.<br /></span>
    <span class="md_line">参见手册:javascript --&gt;右边的参考手册--&gt;window对象</span>
</p>


<p class="md_block">
    <span class="md_line">history:操作浏览器历史记录(前进,后退).</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="c">&lt;!--index6-1.html--&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>第一个页面<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="c1">//前进两个页面</span>
            <span class="kd">function</span> <span class="nx">myForward2</span><span class="p">(){</span>
                <span class="nx">history</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index6-2.html&quot;</span><span class="p">&gt;</span>进入第二个页面<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;back&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;前进2个页面(到第三个页面)&gt;&gt;&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myForward2()&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

<span class="c">&lt;!--index6-2.html--&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="c1">//后退</span>
            <span class="kd">function</span> <span class="nx">myBack</span><span class="p">(){</span>
                <span class="nx">history</span><span class="p">.</span><span class="nx">back</span><span class="p">();</span>
            <span class="p">}</span>
            <span class="c1">//前进</span>
            <span class="kd">function</span> <span class="nx">myForward</span><span class="p">(){</span>
                <span class="nx">history</span><span class="p">.</span><span class="nx">forward</span><span class="p">();</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;index6-3.html&quot;</span><span class="p">&gt;</span>进入第三个页面<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;back&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&lt;&lt;后退&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myBack()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;forward&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;前进&gt;&gt;&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myForward()&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>

<span class="c">&lt;!--index6-3.html--&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="c1">//后退</span>
            <span class="kd">function</span> <span class="nx">myBack</span><span class="p">(){</span>
                <span class="nx">history</span><span class="p">.</span><span class="nx">back</span><span class="p">();</span>
            <span class="p">}</span>
            <span class="c1">//后退两个页面</span>
            <span class="kd">function</span> <span class="nx">myBack2</span><span class="p">(){</span>
                <span class="nx">history</span><span class="p">.</span><span class="nx">go</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
            <span class="p">}</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;back&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&lt;&lt;后退&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myBack()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;back&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;&lt;&lt;后退2个页面(到第一个页面)&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myBack2()&quot;</span> <span class="p">/&gt;</span>
    
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_6">常用方法</h3>

<h4 id="toc_7">alert()方法</h4>

<p class="md_block">
    <span class="md_line">//用于显示一条指定的消息和一个ok按扭.(弹窗警告)</span>
</p>

<div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;这是一个弹出消息&quot;</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;这是一个弹出消息&quot;</span><span class="p">);</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_8">prompt()方法</h4>

<p class="md_block">
    <span class="md_line">//用于提示用户输入的对话框.(给变量动态赋值)<br /></span>
    <span class="md_line">有两个参数:<br /></span>
    <span class="md_line">    text:可选:提示纯文本<br /></span>
    <span class="md_line">    defaultText:可选:默认的输入文本值</span>
</p>

<div class="codehilite code_lang_javascript  highlight"><pre><span></span>            <span class="kd">var</span> <span class="nx">a</span><span class="p">;</span>
            <span class="c1">//a = prompt();//一个参数都不给</span>
            <span class="c1">//a = prompt(&quot;请输入250:&quot;);//第一个参数是提示文本</span>
            <span class="nx">a</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;请输入250:&quot;</span><span class="p">,</span><span class="mi">250</span><span class="p">);</span><span class="c1">//第二个参数是默认值</span>
            <span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_9">confirm()方法</h4>
<div class="codehilite code_lang_javascript  highlight"><pre><span></span>            <span class="k">if</span><span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="s2">&quot;你得选择点 确定  或  取消&quot;</span><span class="p">)){</span>
                <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;你点了  确定   按扭!&quot;</span><span class="p">);</span>
            <span class="p">}</span><span class="k">else</span><span class="p">{</span>
                <span class="nx">alert</span><span class="p">(</span><span class="s2">&quot;你点了  取消   按扭!&quot;</span><span class="p">);</span>
            <span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_10">confirm 与 alert 与 prompt的区别</h4>

<p class="md_block">
    <span class="md_line">confirm:它是让用户选择确认或取消的对话框.返回true或false;常用作于条件判断.<br /></span>
    <span class="md_line">alert :单纯的弹窗消息对话框.<br /></span>
    <span class="md_line">prompt:接收用户输入的对话框.常用于用户动态给变量赋值.</span>
</p>


<h4 id="toc_11">close()方法</h4>

<p class="md_block">
    <span class="md_line">//关闭一个窗口</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">function</span> <span class="nx">myClose</span><span class="p">(){</span>
                <span class="k">if</span><span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="s1">&#39;你确认要关闭此窗口吗?&#39;</span><span class="p">)){</span>
                    <span class="nx">close</span><span class="p">();</span><span class="c1">//关闭浏览器窗口</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;关闭&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myClose()&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_12">open()方法</h4>

<p class="md_block">
    <span class="md_line">浏览器打开一个新的窗口</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>OPEN方法<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">function</span> <span class="nx">newWindow</span><span class="p">(){</span>
                <span class="nx">open</span><span class="p">();</span><span class="c1">//无参数,只是打开一个窗口,无内容</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">newWindow1</span><span class="p">(){</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">newWindow2</span><span class="p">(){</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;baidu&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">newWindow3</span><span class="p">(){</span>
                <span class="c1">//open(&#39;http://www.baidu.com&#39;,&#39;_blank&#39;);</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;_parent&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">newWindow4</span><span class="p">(){</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;width=200,height=200,left=200,top = 200,scrollbars=yes&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">newWindow5</span><span class="p">(){</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;http://www.baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;baidu.com&#39;</span><span class="p">,</span><span class="s1">&#39;fullscreen=yes,resizable=yes&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口带URL&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow1()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口带URL,带名称&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow2()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口带URL,带target&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow3()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口带URL,带三参数&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow4()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;新窗口带URL,全屏&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;newWindow5()&quot;</span> <span class="p">/&gt;</span>
        
        <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_13">setTimeout()方法</h4>

<p class="md_block">
    <span class="md_line">定时器,在一定时间后开始执行(执行后定时器失效)</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
        <span class="c1">//注意:要以匿名函数的形式写参数.</span>
            <span class="nx">setTimeout</span><span class="p">(</span>
                <span class="kd">function</span><span class="p">(){</span>
                    <span class="nx">open</span><span class="p">(</span><span class="s2">&quot;http://www.baidu.com&quot;</span><span class="p">);</span><span class="c1">//延时弹窗</span>
                <span class="p">}</span>
                <span class="p">,</span><span class="mi">5000</span><span class="p">);</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_14">作业:</h4>

<p class="md_block">
    <span class="md_line">1.完成课件上练习:简单购物车功能</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>购物车<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;index12-1.html&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="s2">&quot;width=300,height=200&quot;</span><span class="p">);</span>

            <span class="kd">function</span> <span class="nx">myFullscann</span><span class="p">()</span> <span class="p">{</span>
                <span class="nx">open</span><span class="p">(</span><span class="s1">&#39;index12购物车.html&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="s2">&quot;fullscreen=yes&quot;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="kd">function</span> <span class="nx">mySubmit</span><span class="p">()</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">flag</span> <span class="o">=</span> <span class="nx">confirm</span><span class="p">(</span><span class="s2">&quot;确认提交订单\n\nIphone 7 PLUS \t * 1 \t 7000.00\nIphone 8 PLUS \t * 2 \t 16000.00\n-----------------\n运费: \t 20.00\n金额:\t 23020.00&quot;</span><span class="p">);</span>
                <span class="c1">//如果点的是确认则关闭订单页面.</span>
                <span class="k">if</span><span class="p">(</span><span class="nx">flag</span><span class="p">)</span> <span class="p">{</span>
                    <span class="c1">//alert(&quot;aaaa&quot;);</span>
                    <span class="nx">close</span><span class="p">();</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;1&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;500px&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">th</span> <span class="na">colspan</span><span class="o">=</span><span class="s">&quot;4&quot;</span><span class="p">&gt;</span>购物车<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>商品名称<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>数量(件)<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>单价(元)<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>合计(元)<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Iphone 7 PLUS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>1<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>7000.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>7000.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Iphone 8 PLUS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>2<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>8000.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>16000.00<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">td</span> <span class="na">colspan</span><span class="o">=</span><span class="s">&quot;5&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;text-align: center;&quot;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;提交订单&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;mySubmit()&quot;</span> <span class="p">/&gt;</span>
                    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;全屏显示&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myFullscann()&quot;</span> <span class="p">/&gt;</span>
                <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="c">&lt;!--广告页面--&gt;</span>
<span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>广靠页面<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">function</span> <span class="nx">myClose</span><span class="p">(){</span>
                <span class="nx">close</span><span class="p">();</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;img/xiao.jpg&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;关闭&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;myClose()&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h4 id="toc_15">setInterval()方法</h4>

<p class="md_block">
    <span class="md_line">定时器,在一定时间后开始执行(无限循环的定时器)</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Date对象<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            
        <span class="kd">var</span> <span class="nx">myTime</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="s1">&#39;printDate()&#39;</span><span class="p">,</span><span class="mi">1000</span><span class="p">);</span>   
            
        <span class="kd">function</span> <span class="nx">printDate</span><span class="p">(){</span>
            <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">();</span><span class="c1">//返回现在的日期与时间.格式有点乱</span>
            <span class="kd">var</span> <span class="nx">year</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span><span class="c1">//年份</span>
            <span class="kd">var</span> <span class="nx">month</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span><span class="c1">//月份(0-11)</span>
            <span class="kd">var</span> <span class="nx">day</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDate</span><span class="p">();</span><span class="c1">//日期</span>
            <span class="kd">var</span> <span class="nx">hh</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getHours</span><span class="p">();</span><span class="c1">//小时</span>
            <span class="kd">var</span> <span class="nx">mm</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getMinutes</span><span class="p">();</span><span class="c1">//分钟</span>
            <span class="kd">var</span> <span class="nx">ss</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getSeconds</span><span class="p">();</span><span class="c1">//秒钟</span>
            <span class="kd">var</span> <span class="nx">weekday</span> <span class="o">=</span> <span class="nx">d</span><span class="p">.</span><span class="nx">getDay</span><span class="p">();</span><span class="c1">//星期的第几天(0-6)</span>
            <span class="kd">var</span> <span class="nx">weekDay</span><span class="p">;</span><span class="c1">//中文的星期几</span>
            <span class="kd">var</span> <span class="nx">apm</span> <span class="o">=</span> <span class="s1">&#39;PM&#39;</span><span class="p">;</span>
            <span class="k">if</span><span class="p">(</span><span class="nx">hh</span> <span class="o">&lt;</span> <span class="mi">13</span><span class="p">)</span> <span class="nx">apm</span> <span class="o">=</span> <span class="s1">&#39;AM&#39;</span><span class="p">;</span>
            <span class="k">switch</span><span class="p">(</span><span class="nx">weekday</span><span class="p">){</span>
                <span class="k">case</span> <span class="mi">0</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期天&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">1</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期一&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">2</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期二&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">3</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期三&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">4</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期四&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">5</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期五&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
                <span class="k">case</span> <span class="mi">6</span><span class="o">:</span>
                    <span class="nx">weekDay</span> <span class="o">=</span> <span class="s1">&#39;星期六&#39;</span><span class="p">;</span>
                    <span class="k">break</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="c1">//document.write(&#39;现在是&#39;+year + &#39;年&#39; + (month+1)+&#39;月&#39; + day+&#39;日 &#39;+hh+&#39;:&#39;+mm+&#39;:&#39;+ss+apm + &#39; &#39;+weekDay)</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;lab01&#39;</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">&#39;现在是&#39;</span><span class="o">+</span><span class="nx">year</span> <span class="o">+</span> <span class="s1">&#39;年&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">month</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39;月&#39;</span> <span class="o">+</span> <span class="nx">day</span><span class="o">+</span><span class="s1">&#39;日 &#39;</span><span class="o">+</span><span class="nx">hh</span><span class="o">+</span><span class="s1">&#39;:&#39;</span><span class="o">+</span><span class="nx">mm</span><span class="o">+</span><span class="s1">&#39;:&#39;</span><span class="o">+</span><span class="nx">ss</span><span class="o">+</span><span class="nx">apm</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span><span class="o">+</span><span class="nx">weekDay</span><span class="p">;</span>
            <span class="c1">//document.getElementById(&#39;lab01&#39;).innerHTML = d.toLocaleString();</span>
        <span class="p">}</span>
        <span class="c1">//停止</span>
        <span class="kd">function</span> <span class="nx">stop</span><span class="p">(){</span>
            <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">myTime</span><span class="p">);</span><span class="c1">//停止myTime这个定时器</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">start</span><span class="p">(){</span>
            <span class="nx">myTime</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="s1">&#39;printDate()&#39;</span><span class="p">,</span><span class="mi">1000</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;lab01&quot;</span><span class="p">&gt;</span>我是 label标签<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;停止&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;stop()&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;启动&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;start()&quot;</span> <span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h2 id="toc_16">事件</h2>

<h3 id="toc_17">onload事件:</h3>

<p class="md_block">
    <span class="md_line">网页被浏览器加载完成的时候触发.(包括图片等资源)</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>事件<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="c1">//alert(document.getElementById(&#39;p1&#39;).innerHTML);</span>
             <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="nx">alert</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;p1&#39;</span><span class="p">).</span><span class="nx">innerHTML</span><span class="p">)</span>
             <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;p1&quot;</span><span class="p">&gt;</span>这是一个P标签<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">事件练习</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>事件<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="c1">//alert(document.getElementById(&#39;p1&#39;).innerHTML);//弹窗无效,网页未加载完成</span>
             <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
                <span class="nx">alert</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;p1&#39;</span><span class="p">).</span><span class="nx">innerHTML</span><span class="p">);</span>
             <span class="p">}</span>
             <span class="kd">function</span> <span class="nx">divOver</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
                <span class="nx">obj</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="s1">&#39;red&#39;</span><span class="p">;</span>
             <span class="p">}</span>
             <span class="kd">function</span> <span class="nx">divOut</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
                <span class="nx">obj</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="o">=</span><span class="s1">&#39;#abcdef&#39;</span><span class="p">;</span>
             <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
            <span class="nt">div</span><span class="p">{</span>
                <span class="c">/*宽:200px,高:200px,背景颜色:#abcdef,外边距:5px*/</span>
                <span class="nb">width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span><span class="nb">height</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span> <span class="nb">background-color</span><span class="o">:</span> <span class="m">#abcdef</span><span class="p">;</span>
                <span class="nb">margin</span><span class="o">:</span><span class="m">5px</span> <span class="p">;</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">p</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;p1&quot;</span><span class="p">&gt;</span>这是一个P标签<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div1&quot;</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;divOver(this)&quot;</span> <span class="na">onmouseout</span><span class="o">=</span><span class="s">&quot;divOut(this)&quot;</span><span class="p">&gt;</span>
        第一个div
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;div2&quot;</span> <span class="na">onmouseover</span><span class="o">=</span><span class="s">&quot;divOver(this)&quot;</span> <span class="na">onmouseout</span><span class="o">=</span><span class="s">&quot;divOut(this)&quot;</span><span class="p">&gt;</span>
        第二个div
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end--> </div>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript" src="./asset/gitbook/app.js"></script>

<script>require(["gitbook"], function (gitbook) {
    var config = {"fontSettings": {"theme": null, "family": "sans", "size": 2}};
    gitbook.start(config);
});

</script>





</body>

</html>